<template>
  <div class="image-bed-container">
    <div class="image-bed-header">
      <div class="header-left">
        <h2>图床管理</h2>
        <p class="header-subtitle">共 {{ totalImages }} 张图片</p>
      </div>
      <a-button
        type="primary"
        @click="showUploadModal = true"
        class="upload-button"
      >
        <template #icon>
          <UploadOutlined />
        </template>
        上传图片
      </a-button>
    </div>

    <a-card class="image-card">
      <div class="image-bed-toolbar">
        <div class="toolbar-row">
          <a-button
            type="default"
            @click="handleBatchDelete"
            class="batch-delete-button"
            :disabled="selectedImagesCount === 0"
          >
            <template #icon>
              <DeleteOutlined />
            </template>
            批量删除 ({{ selectedImagesCount }})
          </a-button>
        </div>
      </div>

      <div class="content-area">
        <!-- 网格视图 -->
        <div>
          <div class="image-grid">
            <div
              v-for="image in displayImages"
              :key="image.id"
              class="image-item"
              :class="{ selected: selectedImages.includes(image.id) }"
              @click="toggleSelectImage(image.id)"
            >
              <div class="image-wrapper">
                <a-image
                  :src="image.url"
                  :alt="image.name"
                  class="image-preview"
                  placeholder="图片加载中"
                  style="width: 174px; height: 150px"
                  :preview="{
                    visible:
                      previewVisible && currentPreviewImage?.id === image.id,
                    onVisibleChange: (visible) =>
                      handlePreviewVisibleChange(visible, image),
                    mask: true,
                    scaleStep: 0.1,
                  }"
                  @click.stop
                />
                <div class="image-actions">
                  <a-button
                    type="text"
                    size="small"
                    @click.stop="showImageDetail(image)"
                    title="查看详情"
                  >
                    <EyeOutlined />
                  </a-button>
                  <a-popconfirm
                    title="确定要删除这张图片吗？"
                    description="删除后将无法恢复，是否继续？"
                    @confirm="handleDeleteImage(image.id)"
                    ok-text="确定"
                    cancel-text="取消"
                  >
                    <a-button
                      type="text"
                      size="small"
                      danger
                      @click.stop
                      title="删除图片"
                    >
                      <DeleteOutlined />
                    </a-button>
                  </a-popconfirm>
                </div>
                <div class="image-checkbox">
                  <a-checkbox
                    :checked="selectedImages.includes(image.id)"
                    @change.stop
                  ></a-checkbox>
                </div>
              </div>
              <div class="image-info">
                <div class="image-name">{{ image.name }}</div>
                <div class="image-meta">
                  {{ formatFileSize(image.size) }}
                </div>
              </div>
            </div>
          </div>
          <!-- 网格视图分页组件 -->
          <div
            class="pagination-container"
            style="margin-top: 20px; text-align: center"
          >
            <a-pagination
              v-model:current="pagination.current"
              v-model:page-size="pagination.pageSize"
              :total="pagination.total"
              :show-size-changer="pagination.showSizeChanger"
              :show-quick-jumper="pagination.showQuickJumper"
              :show-total="pagination.showTotal"
              @change="pagination.onChange"
              @showSizeChange="pagination.onShowSizeChange"
              :size="pagination.size"
            />
          </div>
        </div>
      </div>
    </a-card>
  </div>

  <!-- 上传图片弹窗 -->
  <a-modal
    title="上传图片"
    v-model:open="showUploadModal"
    @ok="handleUploadOk"
    @cancel="handleUploadCancel"
    okText="确认上传"
    cancelText="取消"
    :confirmLoading="uploading"
    :width="600"
    :maskClosable="false"
  >
    <div class="upload-modal-content">
      <a-upload-dragger
        name="image"
        :multiple="true"
        :fileList="fileList"
        :beforeUpload="beforeUpload"
        :customRequest="customRequest"
        @change="handleFileChange"
        class="upload-dragger-box"
      >
        <p class="ant-upload-drag-icon">
          <InboxOutlined style="font-size: 48px; color: #1890ff" />
        </p>
        <p class="ant-upload-text">点击或拖拽图片到此区域上传</p>
        <p class="ant-upload-hint">
          支持批量上传 · JPG/PNG/GIF/WebP格式 · 单文件不超过 10MB
        </p>
      </a-upload-dragger>

      <!-- 文件列表预览 -->
      <div v-if="fileList.length > 0" class="upload-file-list">
        <div class="file-list-header">
          <span>待上传文件 ({{ fileList.length }})</span>
          <a-button
            type="link"
            size="small"
            @click="fileList = []"
            v-if="!uploading"
          >
            清空列表
          </a-button>
        </div>
        <div class="file-list-content">
          <div
            v-for="file in fileList"
            :key="file.uid"
            class="file-list-item"
            :class="{
              uploading: file.status === 'uploading',
              done: file.status === 'done',
              error: file.status === 'error',
            }"
          >
            <div class="file-info">
              <CheckOutlined
                v-if="file.status === 'done'"
                class="file-status-icon success"
              />
              <LoadingOutlined
                v-else-if="file.status === 'uploading'"
                class="file-status-icon loading"
              />
              <CloseOutlined
                v-else-if="file.status === 'error'"
                class="file-status-icon error"
              />
              <span class="file-name">{{ file.name }}</span>
              <span class="file-size">{{ formatFileSize(file.size) }}</span>
            </div>
            <a-button
              v-if="!uploading && file.status !== 'done'"
              type="text"
              size="small"
              @click="removeFile(file)"
              danger
            >
              <DeleteOutlined />
            </a-button>
          </div>
        </div>
      </div>

      <!-- 上传进度 -->
      <div v-if="uploadProgress > 0" class="upload-progress-box">
        <div class="progress-header">
          <span class="progress-title">上传进度</span>
          <span class="progress-percentage">{{ uploadProgress }}%</span>
        </div>
        <a-progress
          :percent="uploadProgress"
          :status="uploadProgress === 100 ? 'success' : 'active'"
          :strokeColor="{
            '0%': '#108ee9',
            '100%': '#87d068',
          }"
          :showInfo="false"
        />
        <div class="upload-status-text">{{ uploadStatusText }}</div>
      </div>
    </div>
  </a-modal>

  <!-- 图片详情弹窗 -->
  <a-modal
    title="图片详情"
    v-model:open="showDetailModal"
    width="700px"
    @cancel="handleDetailCancel"
    footer=""
  >
    <div class="detail-modal-content" v-if="selectedImage">
      <div class="detail-image-wrapper">
        <img
          :src="selectedImage.url"
          :alt="selectedImage.name"
          class="detail-image"
        />
      </div>
      <div class="detail-info">
        <h3>{{ selectedImage.name }}</h3>
        <div class="detail-meta">
          <div class="meta-item">
            <span class="meta-label">文件格式：</span>
            <span class="meta-value">{{ selectedImage.format }}</span>
          </div>
          <div class="meta-item">
            <span class="meta-label">文件大小：</span>
            <span class="meta-value">{{
              formatFileSize(selectedImage.size)
            }}</span>
          </div>
          <div class="meta-item">
            <span class="meta-label">图片尺寸：</span>
            <span class="meta-value"
              >{{ selectedImage.width }} × {{ selectedImage.height }} 像素</span
            >
          </div>
          <div class="meta-item">
            <span class="meta-label">上传时间：</span>
            <span class="meta-value">{{
              formatDate(selectedImage.uploadDate)
            }}</span>
          </div>
          <div class="meta-item">
            <span class="meta-label">访问链接：</span>
            <a-input
              :value="selectedImage.url"
              readonly
              style="margin-top: 8px"
            />
            <a-button
              type="default"
              size="small"
              style="margin-top: 8px"
              @click="copyToClipboard(selectedImage.url)"
            >
              复制链接
            </a-button>
          </div>
        </div>
      </div>
    </div>
  </a-modal>
</template>

<script setup>
/**
 * 图片床组件 - 用于管理和展示博客系统中的图片资源
 *
 * 该组件提供以下功能：
 * 1. 图片上传（支持单张上传）
 * 2. 图片浏览（网格视图）
 * 3. 图片浏览和选择
 * 4. 图片删除（单张删除和批量删除）
 * 5. 图片预览
 * 6. 复制图片链接到剪贴板
 */
import { ref, reactive, computed, onMounted, watch } from "vue";
import { message, Modal, notification, Image as AImage } from "ant-design-vue";
import {
  UploadOutlined,
  InboxOutlined,
  EyeOutlined,
  DeleteOutlined,
  CheckOutlined,
  LoadingOutlined,
  CloseOutlined,
} from "@ant-design/icons-vue";
import imageApi from "@/api/image";

// 状态管理
/**
 * 加载状态
 * @type {Ref<boolean>}
 */
const loading = ref(false);

/**
 * 视图模式
 * @type {Ref<string>}
 */
const viewMode = ref("grid");

/**
 * 选中的图片ID列表
 * @type {Ref<Array>}
 */
const selectedImages = ref([]);

/**
 * 预览状态
 * @type {Ref<boolean>}
 */
const previewVisible = ref(false);

/**
 * 当前预览的图片
 * @type {Ref<Object|null>}
 */
const currentPreviewImage = ref(null);

// 监听视图切换，确保选中状态正确保持
watch(viewMode, () => {
  // 强制触发响应式更新，确保选中状态在视图切换后正确显示
  selectedImages.value = [...selectedImages.value];
});

// 计算属性 - 获取选中图片数量
const selectedImagesCount = computed(() => {
  return selectedImages.value.length;
});

// 弹窗状态
/**
 * 是否显示上传弹窗
 * @type {Ref<boolean>}
 */
const showUploadModal = ref(false);

/**
 * 是否显示详情弹窗
 * @type {Ref<boolean>}
 */
const showDetailModal = ref(false);

/**
 * 上传中状态
 * @type {Ref<boolean>}
 */
const uploading = ref(false);

/**
 * 上传进度
 * @type {Ref<number>}
 */
const uploadProgress = ref(0);

/**
 * 上传状态文本
 * @type {Ref<string>}
 */
const uploadStatusText = ref("");

/**
 * 上传文件列表
 * @type {Ref<Array>}
 */
const fileList = ref([]);

// 数据
/**
 * 图片列表数据
 * @type {Ref<Array>}
 */
const images = ref([]);

/**
 * 当前选中的图片数据（用于详情查看）
 * @type {Ref<Object|null>}
 */
const selectedImage = ref(null);

// 分页配置
const pagination = reactive({
  current: 1,
  pageSize: 12,
  total: 0,
  showSizeChanger: true,
  showQuickJumper: true,
  showTotal: (total, range) => {
    return `第 ${range[0]}-${range[1]} 条，共 ${total} 条`;
  },
  onChange: (page, pageSize) => {
    pagination.current = page;
    pagination.pageSize = pageSize;
    filterImages();
  },
  onShowSizeChange: (page, pageSize) => {
    pagination.current = page;
    pagination.pageSize = pageSize;
    filterImages();
  },
  size: "middle",
});

// 表格列配置
const columns = [
  {
    title: "图片",
    dataIndex: "image",
    key: "image",
    width: 80,
  },
  {
    title: "名称",
    dataIndex: "name",
    key: "name",
    ellipsis: true,
    width: 250,
    sorter: (a, b) => a.name.localeCompare(b.name),
  },
  {
    title: "尺寸",
    dataIndex: "dimensions",
    key: "dimensions",
    width: 100,
  },
  {
    title: "大小",
    dataIndex: "size",
    key: "size",
    width: 100,
    sorter: (a, b) => a.size - b.size,
    render: (text) => formatFileSize(text),
  },
  {
    title: "上传时间",
    dataIndex: "uploadDate",
    key: "uploadDate",
    width: 180,
    sorter: (a, b) => new Date(a.uploadDate) - new Date(b.uploadDate),
    render: (text) => formatDate(text),
  },
  {
    title: "操作",
    key: "action",
    width: 200,
    fixed: "right",
  },
];

// 计算显示的图片
const displayImages = computed(() => {
  const startIndex = (pagination.current - 1) * pagination.pageSize;
  const endIndex = startIndex + pagination.pageSize;
  return filteredImages.value.slice(startIndex, endIndex);
});

/**
 * 获取图片列表（不再需要过滤）
 * @returns {Array} 图片数组
 */
const filteredImages = computed(() => {
  return [...images.value];
});

// 计算总图片数
/**
 * 当前过滤后图片的总数
 * @returns {number} 图片总数
 */
const totalImages = computed(() => filteredImages.value.length);

// 增加排序选项
/**
 * 排序选项列表
 * @type {Ref<Array>}
 */
const sortOptions = ref(["uploadDate", "name", "size"]);

/**
 * 当前排序字段
 * @type {Ref<string>}
 */
const currentSort = ref("uploadDate");

// 增加视图模式切换（虽然只实现了网格视图，但保留了扩展性）
// viewMode 已在前面声明并添加了文档注释

// 方法
const handleViewModeChange = () => {
  console.log(selectedImages.value);
};
/**
 * 获取图片列表
 * @returns {Promise<void>}
 */
const fetchImages = async () => {
  try {
    loading.value = true;
    const response = await imageApi.getImages();
    if (response.code === 200) {
      // 正确使用response.data.list获取图片列表
      images.value = response.data.list || [];
      // 更新分页总数
      pagination.total = response.data.total || 0;
    } else {
      message.error("获取图片列表失败");
    }
    filterImages();
  } catch (error) {
    message.error("获取图片列表失败");
    console.error("获取图片列表异常:", error);
  } finally {
    loading.value = false;
  }
};

/**
 * 过滤图片列表并更新分页总数
 * @returns {void}
 */
const filterImages = () => {
  pagination.total = filteredImages.value.length;
};

/**
 * 切换图片选中状态
 * @param {number|string} imageId - 图片ID
 * @returns {void}
 */
const toggleSelectImage = (imageId) => {
  const index = selectedImages.value.indexOf(imageId);
  if (index > -1) {
    selectedImages.value.splice(index, 1);
  } else {
    selectedImages.value.push(imageId);
  }
  // 使用数组展开运算符创建新数组，强制触发响应式更新
  selectedImages.value = [...selectedImages.value];
};

/**
 * 处理批量删除图片操作
 * @returns {Promise<void>}
 */
const handleBatchDelete = async () => {
  if (selectedImages.value.length === 0) {
    message.warning("请先选择要删除的图片");
    return;
  }

  Modal.confirm({
    title: "确定要批量删除选中的图片吗？",
    content: `您选择了 ${selectedImages.value.length} 张图片，删除后将无法恢复。`,
    okText: "确定",
    cancelText: "取消",
    async onOk() {
      try {
        loading.value = true;
        const response = await imageApi.batchDeleteImages(selectedImages.value);
        console.log(response);
        if (response.code === 200) {
          // 删除选中的图片
          images.value = images.value.filter(
            (image) => !selectedImages.value.includes(image.id)
          );
          // 清空选中列表
          selectedImages.value = [];
          filterImages();
          message.success(`成功删除`);
        } else {
          message.error(response.message || "批量删除失败");
        }
      } catch (error) {
        message.error("批量删除失败");
      } finally {
        loading.value = false;
      }
    },
  });
};

/**
 * 处理单张图片删除操作
 * @param {number|string} imageId - 图片ID
 * @returns {Promise<void>}
 */
const handleDeleteImage = async (imageId) => {
  try {
    loading.value = true;
    const response = await imageApi.deleteImage(imageId);
    if (response.code === 200) {
      // 从数据中移除图片
      images.value = images.value.filter((image) => image.id !== imageId);

      // 从选中列表中移除
      const index = selectedImages.value.indexOf(imageId);
      if (index > -1) {
        selectedImages.value.splice(index, 1);
      }

      filterImages();
      message.success("删除成功");
    } else {
      message.error(response.message || "删除失败");
    }
  } catch (error) {
    message.error("删除失败");
  } finally {
    loading.value = false;
  }
};

/**
 * 显示图片详情
 * @param {Object} image - 图片数据对象
 * @returns {void}
 */
const showImageDetail = (image) => {
  selectedImage.value = { ...image };
  showDetailModal.value = true;
};

// 上传相关方法
/**
 * 上传前的验证函数
 * @param {File} file - 要上传的文件对象
 * @returns {boolean} 是否允许上传
 */
const beforeUpload = (file) => {
  const isImage = file.type.startsWith("image/");
  if (!isImage) {
    message.error("只能上传图片文件！");
    return false;
  }

  const isLt10M = file.size / 1024 / 1024 < 10;
  if (!isLt10M) {
    message.error("图片大小不能超过 10MB！");
    return false;
  }

  return true;
};

/**
 * 自定义上传请求处理函数
 * @param {Object} options - 上传选项
 * @param {Function} options.onSuccess - 上传成功回调
 * @param {Function} options.onError - 上传失败回调
 * @param {File} options.file - 要上传的文件对象
 * @returns {Promise<void>}
 */
const customRequest = async ({ onSuccess, onError, file }) => {
  try {
    // 创建FormData对象
    const formData = new FormData();
    formData.append("file", file);

    uploading.value = true;
    uploadProgress.value = 0;
    uploadStatusText.value = `正在上传：${file.name}`;

    const response = await imageApi.uploadImage(formData);
    if (response.code === 200) {
      // 添加到列表开头
      images.value.unshift(response.data);
      filterImages();

      uploadProgress.value = 0;
      uploadStatusText.value = "";
      uploading.value = false;

      onSuccess("ok");
      message.success(`${file.name} 上传成功`);
    } else {
      throw new Error(response.message || "上传失败");
    }
  } catch (error) {
    uploadProgress.value = 0;
    uploadStatusText.value = "";
    uploading.value = false;

    onError(error);
    message.error(`${file.name} 上传失败`);
  }
};

/**
 * 处理文件列表变化
 * @param {Object} options - 文件列表变化选项
 * @param {Array} options.fileList - 新的文件列表
 * @returns {void}
 */
const handleFileChange = ({ fileList: newFileList }) => {
  fileList.value = newFileList;
};

/**
 * 从列表中移除文件
 * @param {Object} file - 要移除的文件
 * @returns {void}
 */
const removeFile = (file) => {
  const index = fileList.value.findIndex((f) => f.uid === file.uid);
  if (index > -1) {
    fileList.value.splice(index, 1);
  }
};

/**
 * 处理上传确认操作
 * @returns {void}
 */
const handleUploadOk = () => {
  if (fileList.value.length === 0) {
    message.warning("请选择要上传的图片");
    return;
  }

  // 触发上传（在实际应用中可能需要手动触发）
};

/**
 * 处理上传取消操作
 * @returns {void}
 */
const handleUploadCancel = () => {
  fileList.value = [];
  uploadProgress.value = 0;
  uploadStatusText.value = "";
};

/**
 * 处理详情弹窗取消操作
 * @returns {void}
 */
const handleDetailCancel = () => {
  selectedImage.value = null;
};

// 预览功能处理函数
/**
 * 处理预览可见性变化
 * @param {boolean} visible - 是否可见
 * @param {Object|null} image - 预览的图片数据
 * @returns {void}
 */
const handlePreviewVisibleChange = (visible, image) => {
  if (visible) {
    currentPreviewImage.value = image;
  }
  previewVisible.value = visible;
};

// 工具函数
/**
 * 格式化文件大小
 * @param {number} bytes - 字节数
 * @returns {string} 格式化后的文件大小字符串
 */
const formatFileSize = (bytes) => {
  if (bytes === 0) return "0 B";

  const k = 1024;
  const sizes = ["B", "KB", "MB", "GB"];
  const i = Math.floor(Math.log(bytes) / Math.log(k));

  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
};

/**
 * 格式化日期时间
 * @param {string} dateString - 日期字符串
 * @returns {string} 格式化后的日期时间字符串
 */
const formatDate = (dateString) => {
  if (!dateString) return "-";

  const date = new Date(dateString);
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, "0");
  const day = String(date.getDate()).padStart(2, "0");
  const hours = String(date.getHours()).padStart(2, "0");
  const minutes = String(date.getMinutes()).padStart(2, "0");

  return `${year}-${month}-${day} ${hours}:${minutes}`;
};

/**
 * 复制文本到剪贴板
 * @param {string} text - 要复制的文本
 * @returns {void}
 */
const copyToClipboard = (text) => {
  navigator.clipboard
    .writeText(text)
    .then(() => {
      message.success("链接已复制到剪贴板");
    })
    .catch(() => {
      message.error("复制失败，请手动复制");
    });
};

/**
 * 组件挂载时初始化数据
 */
onMounted(() => {
  fetchImages();
});
</script>

<style scoped >
.image-bed-container {
  width: 100%;
  height: 100%;
  padding: 24px;
}

.image-bed-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding: 0 4px;
}

.header-left h2 {
  margin-bottom: 4px;
  color: #262626;
  font-size: 20px;
}

.header-subtitle {
  font-size: 14px;
  color: #999;
  margin: 0;
}

.upload-button {
  height: 40px;
  font-size: 14px;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.upload-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(24, 144, 255, 0.3);
}

.image-card {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
  transition: all 0.3s ease;
}

.image-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.image-bed-toolbar {
  padding: 16px;
  background-color: #fafafa;
  border-bottom: 1px solid #f0f0f0;
}

.toolbar-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.search-input {
  border-radius: 6px;
  font-size: 14px;
  transition: all 0.3s ease;
}

.search-input:focus {
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}

.filter-select,
.view-mode-select,
.batch-move-select {
  border-radius: 6px;
  font-size: 14px;
  transition: all 0.3s ease;
}

.reset-button,
.batch-delete-button {
  height: 32px;
  border-radius: 6px;
  font-size: 14px;
  transition: all 0.3s ease;
}

.reset-button:hover {
  background-color: #f5f5f5;
}

.content-area {
  padding: 24px;
}

/* 网格视图样式 */
.image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 200px);
  justify-content: space-between;
  gap: 16px;
}

.image-item {
  background: #fff;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  padding: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  width: 200px;
  height: auto;
}

.image-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border-color: #1890ff;
}

.image-item.selected {
  border-color: #1890ff;
  background-color: #e6f7ff;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}

.image-wrapper {
  position: relative;
  width: 100%;
  height: 150px;
  margin-bottom: 8px;
  overflow: hidden;
  border-radius: 4px;
  background-color: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-preview {
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.image-wrapper:hover .image-preview {
  transform: scale(1.05);
}

.image-actions {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.6);
  padding: 4px 8px;
  display: flex;
  justify-content: flex-end;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.image-wrapper:hover .image-actions {
  opacity: 1;
}

.image-actions .ant-btn {
  color: #fff;
  margin-left: 4px;
  padding: 0;
  min-width: auto;
}

.image-actions .ant-btn:hover {
  color: #1890ff;
}

/* 列表视图图片样式 */
.image-list-preview {
  width: 60px;
  height: 40px;
  object-fit: cover;
  border-radius: 4px;
}

/* 确保视图切换时保持选中状态 */
.image-table .ant-table-row-selected {
  background-color: #e6f7ff;
}

.image-checkbox {
  position: absolute;
  top: 8px;
  left: 8px;
}

.image-info {
  overflow: hidden;
}

.image-name {
  font-size: 14px;
  font-weight: 500;
  color: #262626;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.image-meta {
  font-size: 12px;
  color: #999;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 列表视图样式 */
.table-container {
  margin-top: 16px;
}

.image-table {
  border-radius: 8px;
  overflow: hidden;
}

.image-table .ant-table-thead > tr > th {
  background-color: #fafafa;
  font-weight: 500;
  color: #262626;
  border-bottom: 1px solid #f0f0f0;
}

.image-table .ant-table-tbody > tr {
  transition: all 0.3s ease;
}

.image-table .ant-table-tbody > tr:hover > td {
  background-color: #f5f5f5;
}

.image-list-preview {
  width: 60px;
  height: 40px;
  object-fit: cover;
  border-radius: 4px;
  cursor: pointer;
}

.image-name-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.image-meta-small {
  font-size: 12px;
  color: #999;
}

.action-buttons {
  display: flex;
  gap: 8px;
}

.view-button,
.edit-button,
.delete-button {
  height: 28px;
  font-size: 12px;
  padding: 0 12px;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.view-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.edit-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(24, 144, 255, 0.3);
}

.delete-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(255, 77, 79, 0.3);
}

/* 上传弹窗样式优化 */
.upload-modal-content {
  padding: 8px 0;
}

.upload-dragger-box {
  background: #fafafa;
  transition: all 0.3s;
}

.upload-dragger-box:hover {
  border-color: #1890ff;
  background: #f0f8ff;
}

.upload-dragger-box .ant-upload-drag-container {
  padding: 40px 20px;
}

.ant-upload-drag-icon {
  margin-bottom: 20px;
}

.ant-upload-text {
  font-size: 16px;
  color: #262626;
  margin: 0 0 8px 0;
}

.ant-upload-hint {
  font-size: 14px;
  color: #8c8c8c;
  margin: 0;
}

/* 文件列表样式 */
.upload-file-list {
  margin-top: 24px;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  overflow: hidden;
  background: #fafafa;
}

.file-list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: #fff;
  border-bottom: 1px solid #f0f0f0;
  font-weight: 500;
  color: #262626;
}

.file-list-content {
  max-height: 200px;
  overflow-y: auto;
  padding: 8px;
}

.file-list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  margin-bottom: 8px;
  background: #fff;
  border-radius: 6px;
  transition: all 0.3s;
}

.file-list-item:last-child {
  margin-bottom: 0;
}

.file-list-item.uploading {
  background: #e6f7ff;
  border: 1px solid #91d5ff;
}

.file-list-item.done {
  background: #f6ffed;
  border: 1px solid #b7eb8f;
}

.file-list-item.error {
  background: #fff2e8;
  border: 1px solid #ffbb96;
}

.file-info {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}

.file-status-icon {
  font-size: 16px;
}

.file-status-icon.success {
  color: #52c41a;
}

.file-status-icon.loading {
  color: #1890ff;
}

.file-status-icon.error {
  color: #ff4d4f;
}

.file-name {
  flex: 1;
  color: #262626;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-size {
  color: #8c8c8c;
  font-size: 12px;
  white-space: nowrap;
}

/* 上传进度样式 */
.upload-progress-box {
  margin-top: 24px;
  padding: 16px;
  background: #f0f8ff;
  border-radius: 8px;
  border: 1px solid #91d5ff;
}

.progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.progress-title {
  font-weight: 500;
  color: #262626;
  font-size: 14px;
}

.progress-percentage {
  font-weight: 600;
  color: #1890ff;
  font-size: 16px;
}

.upload-status-text {
  margin-top: 8px;
  font-size: 12px;
  color: #595959;
  text-align: center;
}

.detail-modal-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.detail-image-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f5f5f5;
  border-radius: 8px;
  padding: 24px;
  min-height: 300px;
}

.detail-image {
  max-width: 100%;
  max-height: 400px;
  object-fit: contain;
}

.detail-info {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.detail-meta {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.meta-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.meta-label {
  font-weight: 500;
  color: #262626;
}

.meta-value {
  color: #666;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .toolbar-row {
    flex-direction: column;
    align-items: stretch;
  }

  .search-input,
  .filter-select,
  .view-mode-select,
  .batch-move-select {
    width: 100% !important;
    margin-right: 0 !important;
  }
}

@media (max-width: 768px) {
  .image-bed-container {
    padding: 16px;
  }

  .image-bed-header {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  .upload-button {
    width: 100%;
  }

  .image-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
  }

  .content-area {
    padding: 16px;
  }

  .image-table {
    font-size: 12px;
  }

  .action-buttons {
    flex-wrap: wrap;
  }

  .view-button,
  .edit-button,
  .delete-button {
    flex: 1;
    min-width: 80px;
  }
}
</style>